﻿<html>
  <head>
	  <link type="text/css" rel="stylesheet" href="./js-dart-tis_files/shCoreDefault.css">
    <title>JavaScript, Dart/Chrome 与 TIScript/Sciter 的比较</title>
    <style>
      body { font:10pt Verdana, Arial, sans-serif;  }
      
      h1 { font-weight:400; font-size:22pt; text-shadow: #aaa 1px 1px 2px; }
      h2 { padding:16px 8px; margin:0; text-shadow: #aaa 1px 1px 2px; font-weight:400; font-size:18pt;}
      h3 { padding:8px; margin:0; font-size:10pt; color:#444; }
      
      table { border-collapse:collapse; border-spacing:0 }
    
      td { vertical-align:top; font-size:9pt; 
           padding:4px; 
           border:1px solid #aaa;
         }
         
      td[colspan] { border:none; padding:0; }
      
      td div.syntaxhighlighter 
      { 
        border:none !important; 
        overflow-y:hidden !important;
        background-color: transparent !important; 
      }
      td div.syntaxhighlighter div.line.alt1,
      td div.syntaxhighlighter div.line.alt2
      {
        background-color: transparent !important; 
      }
      
      td:nth-child(1):not([colspan]) { background-color:#ffffef; }
      td:nth-child(3) { background-color:#fffbfa; }
      td:nth-child(2) { background-color:#fafff8; }
    
    </style>

    <script type="text/javascript" src="./js-dart-tis_files/shCore.js"></script>
    <script type="text/javascript" src="./js-dart-tis_files/shBrushJScript.js"></script>

	  <script type="text/javascript">
    SyntaxHighlighter.defaults['gutter'] = false;
    SyntaxHighlighter.defaults['toolbar'] = false;
    SyntaxHighlighter.all();</script>
    
  </head>
<body>
  <h1>JavaScript, Dart/Chrome 与 TIScript/Sciter 的比较</h1>
  <table width="100%">
    <tbody><tr>
      <td><strong>JavaScript</strong></td>
      <td><strong>Dart</strong></td>
      <td><strong>TIScript</strong></td></tr>
    <tr>
      <td colspan="3">
        <h2>代码嵌入</h2></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_305413" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">&lt;script src=</code><code class="js string">'program.js'</code><code class="js plain">&gt;&lt;/script&gt;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_973596" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 注意: 以下代码只能工作于Dartium (一个包含Dart VM</code></div><div class="line number2 index1 alt1"><code class="js comments">//的Chromium)</code></div><div class="line number3 index2 alt2"><code class="js plain">&lt;script type=</code><code class="js string">'application/dart'</code> <code class="js plain">src=</code><code class="js string">'program.dart'</code><code class="js plain">&gt;</code></div><div class="line number4 index3 alt1"><code class="js plain">&lt;/script&gt;</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js comments">// 同时, 你也需要以下代码来启动Dart引擎。</code></div><div class="line number7 index6 alt2"><code class="js plain">&lt;script type='text/javascript'&gt;</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">if</code> <code class="js plain">(navigator.webkitStartDart) {</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">navigator.webkitStartDart();</code></div><div class="line number10 index9 alt1"><code class="js plain">&lt;/script&gt;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_481996" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">&lt;script type=</code><code class="js string">'text/tiscript'</code> <code class="js plain">src=</code><code class="js string">'program.js'</code> <code class="js plain">/&gt;</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>输出日志到控制台</h2></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_254618" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">console.log(</code><code class="js string">'我是日志。'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_130098" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">print(</code><code class="js string">'我是日志。'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_626120" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">stdout.println(</code><code class="js string">"我是日志。"</code><code class="js plain">);</code></div><div class="line number2 index1 alt1"><code class="js plain">stdout.printf(</code><code class="js string">"我是日志 %d。\n"</code><code class="js plain">, levelNo);</code></div><div class="line number3 index2 alt2"><code class="js comments">// 使用字符串器</code></div><div class="line number4 index3 alt1"><code class="js plain">stdout.$n(我是日志 {levelNo} 。);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>代码模块</h2></td></tr>
    <tr>
      <td colspan="3">
        <h3>定义一个库(library)</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_166893" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 没有本地实现。</code></div><div class="line number2 index1 alt1"><code class="js comments">// 考虑 require.js 和 AMD</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_322569" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 下面的代码引入了animals库</code></div><div class="line number2 index1 alt1"><code class="js preprocessor">#library('animals');</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js keyword">class</code> <code class="js plain">Dog {</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">noise() =&gt; </code><code class="js string">'BARK!'</code><code class="js plain">;</code></div><div class="line number6 index5 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_87199" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">//下面的代码声明了一个名称空间, </code></div><div class="line number2 index1 alt1"><code class="js comments">// 这里定义文件名为 animals.tis:</code></div><div class="line number3 index2 alt2"><code class="js keyword">namespace</code> <code class="js plain">animals {</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">class</code> <code class="js plain">Dog {</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">function</code> <code class="js plain">noise() { </code><code class="js keyword">return</code> <code class="js string">"BARK!"</code><code class="js plain">; }</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>使用一个库</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_80339" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 没有本地实现。</code></div><div class="line number2 index1 alt1"><code class="js comments">// 考虑 require.js 和 AMD</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_334835" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js preprocessor">#import('animals');</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">fido = </code><code class="js keyword">new</code> <code class="js plain">Dog();</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js comments">// 支持使用前缀来避免名称空间冲突</code></div><div class="line number5 index4 alt2"><code class="js preprocessor">#import('animals', prefix: 'pets');</code></div><div class="line number6 index5 alt1"><code class="js keyword">var</code> <code class="js plain">fido = </code><code class="js keyword">new</code> <code class="js plain">pets.Dog();</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_143604" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">include(</code><code class="js string">"animals.tis"</code><code class="js plain">);</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">fido = </code><code class="js keyword">new</code> <code class="js plain">animals.Dog();</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js comments">// 要避免名词空间冲突，可以在其他名词空间中</code></div><div class="line number5 index4 alt2"><code class="js comments">// 引入文件</code></div><div class="line number6 index5 alt1"><code class="js keyword">namespace</code> <code class="js plain">Zoo {</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">include(</code><code class="js string">"animals.tis"</code><code class="js plain">);</code></div><div class="line number8 index7 alt1"><code class="js plain">}</code></div><div class="line number9 index8 alt2"><code class="js keyword">var</code> <code class="js plain">fido = </code><code class="js keyword">new</code> <code class="js plain">Zoo.animals.Dog();</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>变量</h2>
        <h3>变量 创建 + 赋值</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_965265" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myName = </code><code class="js string">'Aaron'</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_780774" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Dart中的变量可以有类型...</code></div><div class="line number2 index1 alt1"><code class="js plain">String myName = </code><code class="js string">'Aaron'</code><code class="js plain">;</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js comments">// 同时也可以没有类型</code></div><div class="line number5 index4 alt2"><code class="js keyword">var</code> <code class="js plain">myOtherName = 'Aaron';</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_308363" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myName = </code><code class="js string">'Aaron'</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>变量提升(Hoisting)</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_464245" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// JavaScript中会将变量"提升"到它们的作用域的</code></div><div class="line number2 index1 alt1"><code class="js comments">// 顶部。&nbsp; 所以下面的函数:</code></div><div class="line number3 index2 alt2"><code class="js keyword">function</code> <code class="js plain">printName() {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'Hello, '</code> <code class="js plain">+ name);</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">name = </code><code class="js string">'Bob'</code><code class="js plain">;</code></div><div class="line number6 index5 alt1"><code class="js plain">}</code></div><div class="line number7 index6 alt2">&nbsp;</div><div class="line number8 index7 alt1"><code class="js comments">// 等价于这个函数:</code></div><div class="line number9 index8 alt2"><code class="js keyword">function</code> <code class="js plain">printName() {</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">name;</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'Hello, '</code> <code class="js plain">+ name);</code></div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">name = </code><code class="js string">'Bob'</code><code class="js plain">;</code></div><div class="line number13 index12 alt2"><code class="js plain">}</code></div><div class="line number14 index13 alt1">&nbsp;</div><div class="line number15 index14 alt2"><code class="js plain">printName();</code></div><div class="line number16 index15 alt1"><code class="js comments">// 输出：Hello, undefined</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_563767" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Dart不支持"提升"变量。&nbsp; 所以下面的</code></div><div class="line number2 index1 alt1"><code class="js comments">// 方法会导致一个 "cannot resolve name"的 </code></div><div class="line number3 index2 alt2"><code class="js comments">// 编译错误。</code></div><div class="line number4 index3 alt1"><code class="js plain">printName() {</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(</code><code class="js string">'Hello, $name'</code><code class="js plain">); </code><code class="js comments">// 这里会产生编译错误</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">name = </code><code class="js string">'Bob'</code><code class="js plain">;</code></div><div class="line number7 index6 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_637258" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// TIScript也不支持"提升"变量。&nbsp; 下面的</code></div><div class="line number2 index1 alt1"><code class="js comments">// 方法会产生一个"Variable 'name' not found"的</code></div><div class="line number3 index2 alt2"><code class="js comments">// 运行期错误。</code></div><div class="line number4 index3 alt1"><code class="js keyword">function</code> <code class="js plain">printName() {</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stdout.printf(</code><code class="js string">"Hello, %s\n"</code><code class="js plain">,name); </code><code class="js comments">// 这里会出错</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">name = </code><code class="js string">"Bob"</code><code class="js plain">;</code></div><div class="line number7 index6 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>最终(Final)变量</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_108080" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 不支持</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_41440" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">final name = </code><code class="js string">'Bob'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">// 你可以将final和类型混合使用</code></div><div class="line number4 index3 alt1"><code class="js plain">final String name = </code><code class="js string">'Bob'</code><code class="js plain">;</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js comments">// 在尝试向final变量赋值时会抛出一个错误</code></div><div class="line number7 index6 alt2"><code class="js plain">name = </code><code class="js string">'Alice'</code><code class="js plain">;</code></div><div class="line number8 index7 alt1"><code class="js comments">// ERROR: cannot assign value to final variable</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_246011" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">const name = </code><code class="js string">"Bob"</code><code class="js plain">;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">// 在尝试向常量变量赋值时会抛出一个错误</code></div><div class="line number4 index3 alt1"><code class="js plain">name = </code><code class="js string">"Alice"</code><code class="js plain">;</code></div><div class="line number5 index4 alt2"><code class="js comments">// ERROR: cannot assign to read-only variable</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>容器</h2>
        <h3>数组 / 链表</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_140052" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">a = </code><code class="js keyword">new</code> <code class="js plain">Array();</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">a = [];</code></div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">a = [1, 2, 3];</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_207752" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">a = </code><code class="js keyword">new</code> <code class="js plain">List();</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">a = [];</code></div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">a = [1, 2, 3];</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_877277" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 与JavaScript相同。</code></div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">a = </code><code class="js keyword">new</code> <code class="js plain">Array();</code></div><div class="line number4 index3 alt1"><code class="js keyword">var</code> <code class="js plain">a = [];</code></div><div class="line number5 index4 alt2"><code class="js keyword">var</code> <code class="js plain">a = [1, 2, 3];</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_379150" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">a = [</code><code class="js string">"apple"</code><code class="js plain">, </code><code class="js string">"banana"</code><code class="js plain">, </code><code class="js string">"cherry"</code><code class="js plain">];</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">// 返回数组的新长度值</code></div><div class="line number4 index3 alt1"><code class="js plain">a.push(</code><code class="js string">"donut"</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js comments">// == 4</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js plain">a.length;</code></div><div class="line number8 index7 alt1"><code class="js comments">// == 4</code></div><div class="line number9 index8 alt2">&nbsp;</div><div class="line number10 index9 alt1"><code class="js plain">a.pop();</code></div><div class="line number11 index10 alt2"><code class="js comments">// == "donut"</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_861178" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">a = [</code><code class="js string">'apple'</code><code class="js plain">, </code><code class="js string">'banana'</code><code class="js plain">, </code><code class="js string">'cherry'</code><code class="js plain">];</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">// 返回 null</code></div><div class="line number4 index3 alt1"><code class="js plain">a.add(</code><code class="js string">'donut'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js comments">// == null</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js plain">a.length</code></div><div class="line number8 index7 alt1"><code class="js comments">// == 4</code></div><div class="line number9 index8 alt2">&nbsp;</div><div class="line number10 index9 alt1"><code class="js plain">a.removeLast()</code></div><div class="line number11 index10 alt2"><code class="js comments">// == 'donut'</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_198084" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 与JavaScript相同。</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">a = [</code><code class="js string">"apple"</code><code class="js plain">, </code><code class="js string">"banana"</code><code class="js plain">, </code><code class="js string">"cherry"</code><code class="js plain">];</code></div><div class="line number3 index2 alt2"><code class="js comments">// 返回数组的新长度值</code></div><div class="line number4 index3 alt1"><code class="js plain">a.push(</code><code class="js string">"donut"</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js comments">// == 4</code></div><div class="line number6 index5 alt1"><code class="js plain">a.length;</code></div><div class="line number7 index6 alt2"><code class="js comments">// == 4</code></div><div class="line number8 index7 alt1"><code class="js plain">a.pop();</code></div><div class="line number9 index8 alt2"><code class="js comments">// == "donut"</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>自定义排序</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_304058" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">numbers = [42, 2.1, 5, 0.1, 391];</code></div><div class="line number2 index1 alt1"><code class="js plain">numbers.sort(</code><code class="js keyword">function</code><code class="js plain">(a, b) {</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js plain">a - b;</code></div><div class="line number4 index3 alt1"><code class="js plain">});</code></div><div class="line number5 index4 alt2"><code class="js comments">// == [0.1, 2.1, 5, 42, 391]</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_952297" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">numbers = [42, 2.1, 5, 0.1, 391];</code></div><div class="line number2 index1 alt1"><code class="js plain">numbers.sort((a, b) =&gt; a - b);</code></div><div class="line number3 index2 alt2"><code class="js comments">// == [0.1, 2.1, 5, 42, 391];</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_755575" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 与JavaScript相同，同时可以使用简短的匿名函数表示法:</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">numbers = [42, 2.1, 5, 0.1, 391];</code></div><div class="line number3 index2 alt2"><code class="js plain">numbers.sort( :a, b: a - b );</code></div><div class="line number4 index3 alt1"><code class="js comments">// == [0.1, 2.1, 5, 42, 391]</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>键-值对</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_851227" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 在JavaScript中，一个空的键-值对有两种</code></div><div class="line number2 index1 alt1"><code class="js comments">// 声明方式:</code></div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">periodic = </code><code class="js keyword">new</code> <code class="js plain">Object();</code></div><div class="line number4 index3 alt1"><code class="js keyword">var</code> <code class="js plain">periodic = {};</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_509904" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Dart有一个映射(Map)接口(interface?) </code></div><div class="line number2 index1 alt1"><code class="js comments">// 可以用来存储键-值对：</code></div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">periodic = {};</code></div><div class="line number4 index3 alt1"><code class="js keyword">var</code> <code class="js plain">periodic = </code><code class="js keyword">new</code> <code class="js plain">Map();</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_148478" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 与JavaScript相同</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">periodic = </code><code class="js keyword">new</code> <code class="js plain">Object();</code></div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">periodic = {};</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>适当键(Appropriate keys)</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_261809" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">periodic1 = {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">gold: </code><code class="js string">'AU'</code><code class="js plain">,</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">silver: </code><code class="js string">'AG'</code></div><div class="line number4 index3 alt1"><code class="js plain">};</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js keyword">var</code> <code class="js plain">periodic2 = {</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js string">'gold'</code><code class="js plain">: </code><code class="js string">'AU'</code><code class="js plain">,</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js string">'silver'</code><code class="js plain">: </code><code class="js string">'AG'</code></div><div class="line number9 index8 alt2"><code class="js plain">};</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_153991" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Dart中的键必须是字符串字面值</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">periodic = {</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js string">'gold'</code> <code class="js plain">: </code><code class="js string">'AU'</code><code class="js plain">,</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js string">'silver'</code> <code class="js plain">: </code><code class="js string">'AG'</code></div><div class="line number5 index4 alt2"><code class="js plain">};</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_823916" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 键 - 标识符(symbols)</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">periodic1 = {</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">gold: </code><code class="js string">"AU"</code><code class="js plain">,</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">silver: </code><code class="js string">"AG"</code></div><div class="line number5 index4 alt2"><code class="js plain">};</code></div><div class="line number6 index5 alt1"><code class="js comments">// 键 - 字符串</code></div><div class="line number7 index6 alt2"><code class="js keyword">var</code> <code class="js plain">periodic2 = {</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js string">"gold"</code><code class="js plain">: </code><code class="js string">"AU"</code><code class="js plain">,</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js string">"silver"</code><code class="js plain">: </code><code class="js string">"AG"</code></div><div class="line number10 index9 alt1"><code class="js plain">};</code></div><div class="line number11 index10 alt2"><code class="js comments">// 标识符与字符串是两种不同的类型。</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>访问值</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_317182" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">periodic1.gold </code><code class="js comments">// == 'AU'</code></div><div class="line number2 index1 alt1"><code class="js plain">periodic1[</code><code class="js string">'gold'</code><code class="js plain">] </code><code class="js comments">// == 'AU'</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js plain">periodic2.gold = </code><code class="js string">'Glitter'</code><code class="js plain">;</code></div><div class="line number5 index4 alt2"><code class="js plain">periodic2[</code><code class="js string">'gold'</code><code class="js plain">] = </code><code class="js string">'Glitter'</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_985015" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Values can only be 'get' or 'set' by using </code></div><div class="line number2 index1 alt1"><code class="js comments">// 值可以使用方括号语句来进行'读'或'写'。&nbsp; </code></div><div class="line number3 index2 alt2"><code class="js comments">// 不支持点表示法</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">periodic[</code><code class="js string">'gold'</code><code class="js plain">] </code><code class="js comments">// == 'AU'</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js plain">periodic[</code><code class="js string">'gold'</code><code class="js plain">] = </code><code class="js string">'Glitter'</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_557555" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">periodic1.gold </code><code class="js comments">// == "AU"</code></div><div class="line number2 index1 alt1"><code class="js plain">periodic1[</code><code class="js string">"gold"</code><code class="js plain">] </code><code class="js comments">// == undefined</code></div><div class="line number3 index2 alt2"><code class="js plain">periodic2.gold </code><code class="js comments">// == undefined</code></div><div class="line number4 index3 alt1"><code class="js plain">periodic2[</code><code class="js string">"gold"</code><code class="js plain">] </code><code class="js comments">// == "AU"</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js comments">// 替换旧值</code></div><div class="line number7 index6 alt2"><code class="js plain">periodic1.gold = </code><code class="js string">"Glitter"</code><code class="js plain">;</code></div><div class="line number8 index7 alt1"><code class="js comments">// 在"gold"键下创建新的条目(entry)</code></div><div class="line number9 index8 alt2"><code class="js plain">periodic1[</code><code class="js string">"gold"</code><code class="js plain">] = </code><code class="js string">"Glitter"</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>集合 (唯一项的容器)</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_92030" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// JavaScript没有与之等同的实现</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_602743" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">fruits = </code><code class="js keyword">new</code> <code class="js plain">Set();</code></div><div class="line number2 index1 alt1"><code class="js plain">fruits.add(</code><code class="js string">'oranges'</code><code class="js plain">);</code></div><div class="line number3 index2 alt2"><code class="js plain">fruits.add(</code><code class="js string">'apples'</code><code class="js plain">);</code></div><div class="line number4 index3 alt1"><code class="js plain">fruits.length </code><code class="js comments">// == 2</code></div><div class="line number5 index4 alt2"><code class="js comments">// 重复添加已存在项:</code></div><div class="line number6 index5 alt1"><code class="js plain">fruits.add(</code><code class="js string">'oranges'</code><code class="js plain">);</code></div><div class="line number7 index6 alt2"><code class="js plain">fruits.length </code><code class="js comments">// == 2</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_510219" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">fruits = {};</code></div><div class="line number2 index1 alt1"><code class="js plain">fruits[</code><code class="js string">"oranges"</code><code class="js plain">] = </code><code class="js keyword">true</code><code class="js plain">;</code></div><div class="line number3 index2 alt2"><code class="js plain">fruits[</code><code class="js string">"apples"</code><code class="js plain">] = </code><code class="js keyword">true</code><code class="js plain">;</code></div><div class="line number4 index3 alt1"><code class="js plain">fruits.length </code><code class="js comments">// == 2</code></div><div class="line number5 index4 alt2"><code class="js comments">// 重复添加已存在项:</code></div><div class="line number6 index5 alt1"><code class="js plain">fruits[</code><code class="js string">"oranges"</code><code class="js plain">] = </code><code class="js keyword">true</code><code class="js plain">;</code></div><div class="line number7 index6 alt2"><code class="js plain">fruits.length </code><code class="js comments">// == 2</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>队列 (FIFO)</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_143573" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">queue = [];</code></div><div class="line number2 index1 alt1"><code class="js plain">queue.push(</code><code class="js string">'event:32342'</code><code class="js plain">);</code></div><div class="line number3 index2 alt2"><code class="js plain">queue.push(</code><code class="js string">'event:49309'</code><code class="js plain">);</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">console.log(queue.length); </code><code class="js comments">// 2</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js keyword">var</code> <code class="js plain">eventId = queue.shift();</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js plain">console.log(eventId === </code><code class="js string">'event:32342'</code><code class="js plain">);</code></div><div class="line number10 index9 alt1"><code class="js plain">console.log(queue.length); </code><code class="js comments">// 1</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_177695" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 队列优化了从顶部移除元素</code></div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">queue = </code><code class="js keyword">new</code> <code class="js plain">Queue();</code></div><div class="line number4 index3 alt1"><code class="js plain">queue.add(</code><code class="js string">'event:32342'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">queue.add(</code><code class="js string">'event:49309'</code><code class="js plain">);</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js plain">print(queue.length);&nbsp; </code><code class="js comments">// 2</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js keyword">var</code> <code class="js plain">eventId = queue.removeFirst();</code></div><div class="line number10 index9 alt1">&nbsp;</div><div class="line number11 index10 alt2"><code class="js plain">print(eventId == </code><code class="js string">'event:32342'</code><code class="js plain">); </code><code class="js comments">// true</code></div><div class="line number12 index11 alt1"><code class="js plain">print(queue.length); </code><code class="js comments">// 1</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_107335" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">queue = [];</code></div><div class="line number2 index1 alt1"><code class="js plain">queue.push(</code><code class="js string">"event:32342"</code><code class="js plain">);</code></div><div class="line number3 index2 alt2"><code class="js plain">queue.push(</code><code class="js string">"event:49309"</code><code class="js plain">);</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">stdout.println(queue.length); </code><code class="js comments">// 2</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js keyword">var</code> <code class="js plain">eventId = queue.shift();</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js plain">stdout.println(eventId === </code><code class="js string">"event:32342"</code><code class="js plain">);</code></div><div class="line number10 index9 alt1"><code class="js plain">stdout.println(queue.length); </code><code class="js comments">// 1</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>字符串</h2>
        <h3>原始(raw)字符串</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_17699" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// JavaScript没有所谓的'原始'字符串。</code></div><div class="line number2 index1 alt1"><code class="js comments">// 所有的转义必须手动完成。</code></div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">escapedString = </code><code class="js string">'A tab looks like \\t'</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_186797" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">rawString</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">= @</code><code class="js string">'The following is not expanded to a tab \t'</code><code class="js plain">;</code></div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">escapedString</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">= </code><code class="js string">'The following is not expanded to a tab \\t'</code><code class="js plain">;</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js plain">rawString == escapedString </code><code class="js comments">// == true</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_808936" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// TIScript没有所谓的'原始'字符串。</code></div><div class="line number2 index1 alt1"><code class="js comments">// 所有的转义必须手动完成。</code></div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">escapedString = </code><code class="js string">'A tab looks like \\t'</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>插值</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_33336" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">name = </code><code class="js string">'Aaron'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">greeting = </code><code class="js string">'My name is '</code> <code class="js plain">+ name;</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js keyword">var</code> <code class="js plain">greetingPolish</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">= </code><code class="js string">'My Polish name would be '</code> <code class="js plain">+ name + </code><code class="js string">'ski'</code><code class="js plain">;</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js plain">element.style.top = (top + 20) + </code><code class="js string">'px'</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_898054" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">name = </code><code class="js string">'Aaron'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">greeting = </code><code class="js string">'My name is $name.'</code><code class="js plain">;</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js keyword">var</code> <code class="js plain">greetingPolish</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">= </code><code class="js string">'My Polish name would be ${name}ski.'</code><code class="js plain">;</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js comments">// 在字符串插值中可以进行运算 </code></div><div class="line number9 index8 alt2"><code class="js plain">element.style.top = </code><code class="js string">'${top + 20}px'</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_531011" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// TIScript有所谓的"字符串器" 函数 -</code></div><div class="line number2 index1 alt1"><code class="js comments">// 字符串字面值可以与函数调用混合使用:</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js keyword">var</code> <code class="js plain">name = </code><code class="js string">'Aaron'</code><code class="js plain">;</code></div><div class="line number5 index4 alt2"><code class="js keyword">var</code> <code class="js plain">greeting = String.$(My name is {name}.);</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js keyword">var</code> <code class="js plain">greetingPolish</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">= String.$(My Polish name would be {name}ski.);</code></div><div class="line number9 index8 alt2">&nbsp;</div><div class="line number10 index9 alt1"><code class="js comments">// 在字符串插值中可以进行运算 </code></div><div class="line number12 index11 alt1"><code class="js plain">element.style.top = String.$({top + 20}px);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>子字符串</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_635480" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js string">'doghouses'</code><code class="js plain">.substring(3, 8) </code><code class="js comments">// == 'houses'</code></div><div class="line number2 index1 alt1"><code class="js string">'doghouses'</code><code class="js plain">.substr(3, 5) </code><code class="js comments">// == 'houses'</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_128013" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js string">'doghouses'</code><code class="js plain">.substring(3, 8); </code><code class="js comments">// == 'houses'</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_394029" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 与JS相同:</code></div><div class="line number2 index1 alt1"><code class="js string">"doghouses"</code><code class="js plain">.substring(3, 8) </code><code class="js comments">// == "houses"</code></div><div class="line number3 index2 alt2"><code class="js string">"doghouses"</code><code class="js plain">.substr(3, 5) </code><code class="js comments">// == "houses"</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>替换所有</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_435789" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js string">'doghouses'</code><code class="js plain">.replace(/s/g, </code><code class="js string">'z'</code><code class="js plain">) </code><code class="js comments">// == 'doghouzez'</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_929714" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js string">'doghouses'</code><code class="js plain">.replaceAll(</code><code class="js string">'s'</code><code class="js plain">,</code><code class="js string">'z'</code><code class="js plain">); </code><code class="js comments">// == 'doghouzez'</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_202679" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js string">"doghouses"</code><code class="js plain">.replace(/s/g, </code><code class="js string">"z"</code><code class="js plain">) </code><code class="js comments">// == 'doghouzez'</code></div><div class="line number2 index1 alt1"><code class="js string">"doghouses"</code><code class="js plain">.replace(</code><code class="js string">"s"</code><code class="js plain">, </code><code class="js string">"z"</code><code class="js plain">) </code><code class="js comments">// == 'doghouzez'</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>替换一个</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_318830" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js string">'racecar'</code><code class="js plain">.replace(/r/, </code><code class="js string">'sp'</code><code class="js plain">) </code><code class="js comments">// == 'spacecar'</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_203610" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js string">'racecar'</code><code class="js plain">.replaceFirst(</code><code class="js string">'r'</code><code class="js plain">, </code><code class="js string">'sp'</code><code class="js plain">); </code><code class="js comments">// == 'spacecar'</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_529433" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js string">"racecar"</code><code class="js plain">.replace(/r/, </code><code class="js string">"sp"</code><code class="js plain">) </code><code class="js comments">// == "spacecar"</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>多行字符串</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_792677" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">string =</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">'This is a string that spans\n'</code> <code class="js plain">+</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">'many lines.\n'</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_739116" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Dart会忽略第一个新行 </code></div><div class="line number2 index1 alt1"><code class="js comments">// (如果它直接出现在引号后面时), </code></div><div class="line number3 index2 alt2"><code class="js comments">// 但是不会忽略最后的新行。</code></div><div class="line number4 index3 alt1"><code class="js keyword">var</code> <code class="js plain">string = </code><code class="js string">''</code><code class="js string">'</code></div><div class="line number5 index4 alt2"><code class="js string">This is a string that spans</code></div><div class="line number6 index5 alt1"><code class="js string">many lines.</code></div><div class="line number7 index6 alt2"><code class="js string">'</code><code class="js string">''</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_972558" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 后面跟着的字符串字面值会合并成单行字符串字面值：</code></div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">string1 =</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">"This is a string that spans\n"</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">"many lines.\n"</code><code class="js plain">;</code></div><div class="line number6 index5 alt1"><code class="js comments">// 字符串字面值可以放置在多行上:</code></div><div class="line number7 index6 alt2"><code class="js keyword">var</code> <code class="js plain">string2 =</code></div><div class="line number8 index7 alt1"><code class="js string">"This is a string that spans</code></div><div class="line number9 index8 alt2"><code class="js string">many lines.</code></div><div class="line number10 index9 alt1"><code class="js string">"</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>拆分成数组</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_642868" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">animals = </code><code class="js string">'dogs, cats, gophers, zebras'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">individualAnimals = animals.split(</code><code class="js string">', '</code><code class="js plain">);</code></div><div class="line number3 index2 alt2"><code class="js comments">// == ['dogs', 'cats', 'gophers', 'zebras'];</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_271548" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">animals = </code><code class="js string">'dogs, cats, gophers, zebras'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">individualAnimals = animals.split(</code><code class="js string">', '</code><code class="js plain">);</code></div><div class="line number3 index2 alt2"><code class="js comments">// == ['dogs', 'cats', 'gophers', 'zebras'];</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_739126" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">animals = </code><code class="js string">"dogs, cats, gophers, zebras"</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">individualAnimals = animals.split(</code><code class="js string">", "</code><code class="js plain">);</code></div><div class="line number3 index2 alt2"><code class="js comments">// == ['dogs', 'cats', 'gophers', 'zebras'];</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>测试一个字符串使用以某个字符串开头</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_245480" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// JavaScript没有内建的startsWith函数</code></div><div class="line number2 index1 alt1"><code class="js plain">String.prototype.startsWith = </code><code class="js keyword">function</code><code class="js plain">(beginning)</code></div><div class="line number3 index2 alt2"><code class="js plain">{</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">head = </code><code class="js keyword">this</code><code class="js plain">.substr(0, beginning.length);</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js plain">head == beginning;</code></div><div class="line number6 index5 alt1"><code class="js plain">}</code></div><div class="line number7 index6 alt2">&nbsp;</div><div class="line number8 index7 alt1"><code class="js string">'racecar'</code><code class="js plain">.startsWith(</code><code class="js string">'race'</code><code class="js plain">) </code><code class="js comments">// == true</code></div><div class="line number9 index8 alt2"><code class="js string">'racecar'</code><code class="js plain">.startsWith(</code><code class="js string">'pace'</code><code class="js plain">) </code><code class="js comments">// == false</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_715120" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Dart字符串对象有一个内建的</code></div><div class="line number2 index1 alt1"><code class="js comments">// 方法</code></div><div class="line number3 index2 alt2"><code class="js string">'racecar'</code><code class="js plain">.startsWith(</code><code class="js string">'race'</code><code class="js plain">); </code><code class="js comments">// == true</code></div><div class="line number4 index3 alt1"><code class="js string">'racecar'</code><code class="js plain">.startsWith(</code><code class="js string">'pace'</code><code class="js plain">); </code><code class="js comments">// == false</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_578634" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js string">"racecar"</code><code class="js plain">.indexOf(</code><code class="js string">"race"</code><code class="js plain">) == 0; </code><code class="js comments">// == true</code></div><div class="line number2 index1 alt1"><code class="js string">"racecar"</code><code class="js plain">.indexOf(</code><code class="js string">"pace"</code><code class="js plain">) == 0; </code><code class="js comments">// == false</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js comments">// 如果有人想明确的使用startsWith方法，</code></div><div class="line number5 index4 alt2"><code class="js comments">// 你可以为String类扩展一个这样的方法:</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js keyword">function</code> <code class="js plain">String.startsWith(str) {</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js keyword">this</code><code class="js plain">.indexOf(str) == 0;</code></div><div class="line number9 index8 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>布尔运算(Booleans)</h2>
        <h3>If 语句</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_72551" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">bugNumbers = [3234,4542,944,124];</code></div><div class="line number2 index1 alt1"><code class="js keyword">if</code> <code class="js plain">(bugNumbers.length &gt; 0) {</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'Not ready for release'</code><code class="js plain">);</code></div><div class="line number4 index3 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_202002" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">bugNumbers = [3234,4542,944,124];</code></div><div class="line number2 index1 alt1"><code class="js keyword">if</code> <code class="js plain">(bugNumbers.length &gt; 0) {</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(</code><code class="js string">'Not ready for release'</code><code class="js plain">);</code></div><div class="line number4 index3 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_741865" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">bugNumbers = [3234,4542,944,124];</code></div><div class="line number2 index1 alt1"><code class="js keyword">if</code> <code class="js plain">(bugNumbers.length &gt; 0) {</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stderr.println(</code><code class="js string">"Not ready for release"</code><code class="js plain">);</code></div><div class="line number4 index3 alt1"><code class="js plain">}</code></div><div class="line number5 index4 alt2"><code class="js comments">// 或者</code></div><div class="line number6 index5 alt1"><code class="js keyword">if</code> <code class="js plain">(bugNumbers)</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stderr.$n(Not ready </code><code class="js keyword">for</code> <code class="js plain">release);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>三元语句</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_344727" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">bugNumbers = [3234,4542,944,124];</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">status = bugNumbers.length &gt; 0 </code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">? </code><code class="js string">'RED'</code> <code class="js plain">: </code><code class="js string">'GREEN'</code><code class="js plain">;</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">console.log(</code><code class="js string">'The build is '</code> <code class="js plain">+ status);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_960380" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">bugNumbers = [3234,4542,944,124];</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">status = bugNumbers.length &gt; 0</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">? </code><code class="js string">'RED'</code> <code class="js plain">: </code><code class="js string">'GREEN'</code><code class="js plain">;</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">print(</code><code class="js string">'The build is $status'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_194996" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">bugNumbers = [3234,4542,944,124];</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">status = bugNumbers ? </code><code class="js string">"RED"</code> <code class="js plain">: </code><code class="js string">"GREEN"</code><code class="js plain">;</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js plain">stdout.$n(The build is {status});</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>检测是否是空字符串</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_660713" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">emptyString = </code><code class="js string">''</code><code class="js plain">;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(!emptyString) {</code></div><div class="line number4 index3 alt1"><code class="js plain">console.log(</code><code class="js string">'empty strings are'</code> <code class="js plain">+</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">' treated as false'</code><code class="js plain">);</code></div><div class="line number6 index5 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_696894" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">emptyString = </code><code class="js string">''</code><code class="js plain">;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(emptyString.isEmpty()) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(</code><code class="js string">'use isEmpty()'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_639324" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">emptyString = </code><code class="js string">""</code><code class="js plain">;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(!emptyString) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stdout.$n(empty strings are treated as </code><code class="js keyword">false</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>检查是否为0</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_949912" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">zero = 0;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(!zero) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'0 is treated as false'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_840458" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">zero = 0;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(zero == 0) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(</code><code class="js string">'use == 0 to check zero'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_226514" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">zero = 0;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(!zero) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stdout.$(0 is treated as </code><code class="js keyword">false</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>检查是否为null</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_398592" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myNull = </code><code class="js keyword">null</code><code class="js plain">;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(!myNull) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'null is treated as false'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_204292" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myNull = </code><code class="js keyword">null</code><code class="js plain">;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(myNull == </code><code class="js keyword">null</code><code class="js plain">) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(</code><code class="js string">'use == null to check null'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_959275" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myNull = </code><code class="js keyword">null</code><code class="js plain">;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(!myNull)</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stdout.$n(</code><code class="js keyword">null</code> <code class="js plain">is treated as </code><code class="js keyword">false</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>检查是否为 NaN</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_986719" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myNaN = NaN;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(!myNaN) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'NaN is treated as false'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_686012" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myNan = 0/0;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(myNaN.isNaN()) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(</code><code class="js string">'use isNaN to check if a number is NaN'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_928799" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myNaN = 0.0/0.0;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(myNaN.isNaN())</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stdout.println(</code><code class="js string">"use Float.isNaN()"</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>检查是否为 undefined</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_333885" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">isUndefined;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(!isUndefined) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'undefined is treated as false'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_814264" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Dart没有undefined的概念</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_290072" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">isUndefined;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(!isUndefined)</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stdout.println(</code><code class="js string">"undefined is treated as false"</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js keyword">if</code> <code class="js plain">(isUndefined === undefined)</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stdout.println(</code><code class="js string">"test for exactly undefined"</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>值与标识符等价判断</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_721464" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">letterA = </code><code class="js string">'A'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">charA = String.fromCharCode(65);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js comments">// JavaScript在比较之前</code></div><div class="line number5 index4 alt2"><code class="js comments">// 将两个值转换成相同类型再比较</code></div><div class="line number6 index5 alt1"><code class="js comments">// 使用 '双等号'。</code></div><div class="line number7 index6 alt2"><code class="js plain">letterA == charA </code><code class="js comments">// == true</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js comments">// Similarly...</code></div><div class="line number10 index9 alt1"><code class="js keyword">var</code> <code class="js plain">number5 = 5;</code></div><div class="line number11 index10 alt2"><code class="js keyword">var</code> <code class="js plain">char5 = </code><code class="js string">'5'</code><code class="js plain">;</code></div><div class="line number12 index11 alt1">&nbsp;</div><div class="line number13 index12 alt2"><code class="js comments">// 这个比较会触发类型转换</code></div><div class="line number14 index13 alt1"><code class="js plain">number1 == char1 </code><code class="js comments">// == true</code></div><div class="line number15 index14 alt2">&nbsp;</div><div class="line number16 index15 alt1"><code class="js comments">// '三等号' 检查类型和值</code></div><div class="line number17 index16 alt2"><code class="js plain">letterA === charA </code><code class="js comments">// == true</code></div><div class="line number18 index17 alt1"><code class="js plain">number5 === char5 </code><code class="js comments">// == false</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_884695" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// NOTE: the follow is BRAND NEW and implementations</code></div><div class="line number2 index1 alt1"><code class="js comments">// do not yet match the below semantics. The below is</code></div><div class="line number3 index2 alt2"><code class="js comments">// how it will work.</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js comments">/*</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;</code><code class="js comments">* In Dart, == will check the following, in order:</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;</code><code class="js comments">* 1) if x === y then return true (=== is identity).</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;</code><code class="js comments">*&nbsp;&nbsp;&nbsp; Otherwise:</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;</code><code class="js comments">* 2) if either x or y is null, return false. Otherwise</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;</code><code class="js comments">* 3) return the result of x.equals(y) </code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;</code><code class="js comments">*&nbsp;&nbsp;&nbsp; (pending: might become eq())</code></div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;</code><code class="js comments">*/</code></div><div class="line number13 index12 alt2">&nbsp;</div><div class="line number14 index13 alt1"><code class="js comments">/*</code></div><div class="line number15 index14 alt2"><code class="js spaces">&nbsp;</code><code class="js comments">* This means:</code></div><div class="line number16 index15 alt1"><code class="js spaces">&nbsp;</code><code class="js comments">* a) use x == null instead of x === null</code></div><div class="line number17 index16 alt2"><code class="js spaces">&nbsp;</code><code class="js comments">* b) there's almost no reason to every use === or !==</code></div><div class="line number18 index17 alt1"><code class="js spaces">&nbsp;</code><code class="js comments">* c) when implementing equals() you don't have to worry</code></div><div class="line number19 index18 alt2"><code class="js spaces">&nbsp;</code><code class="js comments">*&nbsp;&nbsp;&nbsp; about manually checking for null arg</code></div><div class="line number20 index19 alt1"><code class="js spaces">&nbsp;</code><code class="js comments">* d) you can't define your own type that considers itself</code></div><div class="line number21 index20 alt2"><code class="js spaces">&nbsp;</code><code class="js comments">*&nbsp;&nbsp;&nbsp; equal to null</code></div><div class="line number22 index21 alt1"><code class="js spaces">&nbsp;</code><code class="js comments">* e) null == null</code></div><div class="line number23 index22 alt2"><code class="js spaces">&nbsp;</code><code class="js comments">*/</code></div><div class="line number24 index23 alt1">&nbsp;</div><div class="line number25 index24 alt2"><code class="js comments">// therefore, the following code will work:</code></div><div class="line number26 index25 alt1">&nbsp;</div><div class="line number27 index26 alt2"><code class="js keyword">var</code> <code class="js plain">letterA = 'A</code><code class="js string">'</code>;</div><div class="line number28 index27 alt1"><code class="js keyword">var</code> charA = new String.fromCharCodes([65]);</div><div class="line number29 index28 alt2">&nbsp;</div><div class="line number30 index29 alt1"><code class="js comments">// String defines equals() as</code></div><div class="line number31 index30 alt2"><code class="js comments">// 'same character codes in same order'</code></div><div class="line number32 index31 alt1"><code class="js plain">letterA == charA <code class="js comments">// == true</code></code></div><div class="line number33 index32 alt2">&nbsp;</div><div class="line number34 index33 alt1"><code class="js comments">// However, the following is different than JavaScript</code></div><div class="line number35 index34 alt2">&nbsp;</div><div class="line number36 index35 alt1"><code class="js plain"><code class="js keyword">var</code> number5 = 5;</code></div><div class="line number37 index36 alt2"><code class="js plain"><code class="js keyword">var</code> char5 = </code><code class="js string">'5'</code>;</div><div class="line number38 index37 alt1">&nbsp;</div><div class="line number39 index38 alt2"><code class="js plain">number1 != char1 </code><code class="js comments">// == true, because of different types</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_961077" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">charcodeA = </code><code class="js string">'A'</code><code class="js plain">; </code><code class="js comments">// 整数，等价于 'A'的</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">// UNICODE codepoint值 </code></div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">letterA = </code><code class="js string">"A"</code><code class="js plain">;</code></div><div class="line number4 index3 alt1"><code class="js keyword">var</code> <code class="js plain">charA = String.fromCharCode(65);</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js comments">// letterA 和 charA 是字符串</code></div><div class="line number7 index6 alt2"><code class="js comments">// 但是charcodeA是整数:</code></div><div class="line number8 index7 alt1"><code class="js plain">letterA == charA </code><code class="js comments">// == true</code></div><div class="line number9 index8 alt2"><code class="js plain">charcodeA == charA </code><code class="js comments">// == false, 不同的类型</code></div><div class="line number10 index9 alt1">&nbsp;</div><div class="line number11 index10 alt2"><code class="js comments">// 类似的...</code></div><div class="line number12 index11 alt1"><code class="js keyword">var</code> <code class="js plain">number5 = 5;</code></div><div class="line number13 index12 alt2"><code class="js keyword">var</code> <code class="js plain">char5 = </code><code class="js string">"5"</code><code class="js plain">; </code><code class="js comments">// 注意，这里是字符串</code></div><div class="line number14 index13 alt1">&nbsp;</div><div class="line number15 index14 alt2"><code class="js comments">// 这个比较操作不会触发</code></div><div class="line number16 index15 alt1"><code class="js comments">// 类型转换:</code></div><div class="line number17 index16 alt2"><code class="js plain">number1 == char1; </code><code class="js comments">// == false</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>函数</h2>
        <h3>函数定义</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_659420" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">fn() { </code><code class="js keyword">return</code> <code class="js string">'Hello'</code><code class="js plain">; }</code></div><div class="line number2 index1 alt1"><code class="js plain">fn(); </code><code class="js comments">// == 'Hello'</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js plain">(</code><code class="js keyword">function</code><code class="js plain">(){})() </code><code class="js comments">// == 返回 undefined</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_234609" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 与JavaScript类似, 在函数中使用'return'关键字来</code></div><div class="line number2 index1 alt1"><code class="js comments">// 定义一个返回值。</code></div><div class="line number3 index2 alt2"><code class="js plain">fn() { </code><code class="js keyword">return</code> <code class="js string">'Hello'</code><code class="js plain">; }</code></div><div class="line number4 index3 alt1"><code class="js plain">fn(); </code><code class="js comments">// == 'Hello'</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js comments">// 一个没有返回值返回null的函数。</code></div><div class="line number7 index6 alt2"><code class="js plain">((){})(); </code><code class="js comments">// == returns null</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js comments">// 如果函数体返回的表达式是单语句，</code></div><div class="line number11 index10 alt2"><code class="js comments">// 可以使用一种短格式表示法：</code></div><div class="line number12 index11 alt1"><code class="js plain">fn() =&gt; </code><code class="js keyword">true</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_403560" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">fn() { </code><code class="js keyword">return</code> <code class="js string">"Hello"</code><code class="js plain">; }</code></div><div class="line number2 index1 alt1"><code class="js plain">fn(); </code><code class="js comments">// == 'Hello'</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js plain">(</code><code class="js keyword">function</code><code class="js plain">(){})() </code><code class="js comments">// == 返回 undefined</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>将函数赋值给一个变量，匿名函数</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_312212" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">loudify = </code><code class="js keyword">function</code><code class="js plain">(msg) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js plain">msg.toUpperCase();</code></div><div class="line number3 index2 alt2"><code class="js plain">}</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">loudify(</code><code class="js string">'not gonna take it anymore'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_319769" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">loudify = (msg) =&gt; msg.toUpperCase();</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">loudify(</code><code class="js string">'not gonna take it anymore'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_824135" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// TIScript定义匿名函数有3种格式：</code></div><div class="line number3 index2 alt2"><code class="js comments">// 1. 单表达式函数:</code></div><div class="line number4 index3 alt1"><code class="js keyword">var</code> <code class="js plain">loudify1 = : msg : msg.toUpperCase();</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js comments">// 2. 表达式块函数:</code></div><div class="line number7 index6 alt2"><code class="js keyword">var</code> <code class="js plain">loudify2 = : msg { </code><code class="js keyword">return</code> <code class="js plain">msg.toUpperCase(); }</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js comments">// 3. 标准JS方式:</code></div><div class="line number10 index9 alt1"><code class="js keyword">var</code> <code class="js plain">loudify3 = </code><code class="js keyword">function</code><code class="js plain">(msg)</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">{ </code><code class="js keyword">return</code> <code class="js plain">msg.toUpperCase(); }</code></div><div class="line number12 index11 alt1">&nbsp;</div><div class="line number13 index12 alt2"><code class="js plain">loudifyN(</code><code class="js string">"not gonna take it anymore"</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>可选参数</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_197195" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">fn(a, b, c) { </code><code class="js keyword">return</code> <code class="js plain">c; };</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">fn(1) </code><code class="js comments">// == undefined</code></div><div class="line number4 index3 alt1"><code class="js plain">fn(1, 2, 3) </code><code class="js comments">// == 3</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_121946" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">fn(a, b, c) =&gt; c;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">fn(1); </code><code class="js comments">// ERROR: NoSuchMethodException</code></div><div class="line number4 index3 alt1"><code class="js plain">fn(1, 2, 3); </code><code class="js comments">// == 3</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js comments">// Dart使用方括号来指定可选参数</code></div><div class="line number7 index6 alt2"><code class="js plain">fn(a, [b, c]) =&gt; c;</code></div><div class="line number8 index7 alt1"><code class="js plain">fn(</code><code class="js string">'a'</code><code class="js plain">); </code><code class="js comments">// == null</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_439349" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 与JS相同</code></div><div class="line number2 index1 alt1"><code class="js keyword">function</code> <code class="js plain">fn(a, b, c) { </code><code class="js keyword">return</code> <code class="js plain">c; };</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js plain">fn(1) </code><code class="js comments">// == undefined</code></div><div class="line number5 index4 alt2"><code class="js plain">fn(1, 2, 3) </code><code class="js comments">// == 3</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>默认参数</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_540949" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">send(msg, rate) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">rate = rate || </code><code class="js string">'First Class'</code><code class="js plain">;</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js plain">msg + </code><code class="js string">" was sent via "</code> <code class="js plain">+ rate;</code></div><div class="line number4 index3 alt1"><code class="js plain">}</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js plain">send(</code><code class="js string">'hello'</code><code class="js plain">)</code></div><div class="line number7 index6 alt2"><code class="js comments">// == 'hello was sent via First Class'</code></div><div class="line number8 index7 alt1"><code class="js plain">send(</code><code class="js string">"I'm cheap"</code><code class="js plain">, '4th </code><code class="js keyword">class</code><code class="js string">')</code></div><div class="line number9 index8 alt2"><code class="js string">// == "I'</code><code class="js plain">m cheap was sent via 4th </code><code class="js keyword">class</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_67538" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">send(msg, [rate=</code><code class="js string">'First Class'</code><code class="js plain">]) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js string">'${msg} was sent via ${rate}'</code><code class="js plain">;</code></div><div class="line number3 index2 alt2"><code class="js plain">}</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">send(</code><code class="js string">'hello'</code><code class="js plain">);</code></div><div class="line number6 index5 alt1"><code class="js comments">// == 'hello was sent via First Class'</code></div><div class="line number7 index6 alt2"><code class="js plain">send(</code><code class="js string">"I'm cheap"</code><code class="js plain">, '4th </code><code class="js keyword">class</code><code class="js string">');</code></div><div class="line number8 index7 alt1"><code class="js string">// == "I'</code><code class="js plain">m cheap was sent via 4th </code><code class="js keyword">class</code><code class="js plain">"</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_40199" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 支持JavaScript中的方式。</code></div><div class="line number2 index1 alt1"><code class="js comments">// 同时也支持:</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js keyword">function</code> <code class="js plain">send(msg, rate = </code><code class="js string">"First Class"</code><code class="js plain">) {</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js plain">String.$({msg} was sent via {rate});</code></div><div class="line number6 index5 alt1"><code class="js plain">}</code></div><div class="line number7 index6 alt2">&nbsp;</div><div class="line number8 index7 alt1"><code class="js plain">send(</code><code class="js string">"hello"</code><code class="js plain">)</code></div><div class="line number9 index8 alt2"><code class="js comments">// == 'hello was sent via First Class'</code></div><div class="line number10 index9 alt1"><code class="js plain">send(</code><code class="js string">"I'm cheap"</code><code class="js plain">, </code><code class="js string">"4th class"</code><code class="js plain">)</code></div><div class="line number11 index10 alt2"><code class="js comments">// == "I'm cheap was sent via 4th class</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>命名参数</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_510558" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// JavaScript没有支持</code></div><div class="line number2 index1 alt1"><code class="js comments">// 命名参数的本地实现</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_748225" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">send(msg, [rate=</code><code class="js string">'First Class'</code><code class="js plain">]) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js string">'${msg} was sent via ${rate}'</code><code class="js plain">;</code></div><div class="line number3 index2 alt2"><code class="js plain">}</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js comments">// 如果是可选参数，</code></div><div class="line number6 index5 alt1"><code class="js comments">// 你可以使用命名参数：</code></div><div class="line number7 index6 alt2"><code class="js plain">send(</code><code class="js string">"I'm cheap"</code><code class="js plain">, rate:'4th </code><code class="js keyword">class</code><code class="js string">');</code></div><div class="line number8 index7 alt1"><code class="js string">// == "I'</code><code class="js plain">m cheap was sent via 4th </code><code class="js keyword">class</code><code class="js plain">"</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_282030" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// TIScript有一个特有的语句</code></div><div class="line number2 index1 alt1"><code class="js comments">// 支持调用函数时传递一个对象参数：</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js keyword">function</code> <code class="js plain">send(params) {</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">rate = params.rate || </code><code class="js string">"First Class"</code><code class="js plain">;</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js plain">String.$({params.msg} sent {rate});</code></div><div class="line number8 index7 alt1"><code class="js plain">}</code></div><div class="line number9 index8 alt2">&nbsp;</div><div class="line number10 index9 alt1"><code class="js comments">// 短格式 - call-with-object:</code></div><div class="line number11 index10 alt2"><code class="js plain">send {msg:</code><code class="js string">"I'm cheap"</code><code class="js plain">,rate:</code><code class="js string">"4th class"</code><code class="js plain">};</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>参数个数不固定</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_111367" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">superHeroes() {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0; i &lt; arguments.length; i++) {</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">"There's no stopping "</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">+ arguments[i]);</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number6 index5 alt1"><code class="js plain">}</code></div><div class="line number7 index6 alt2">&nbsp;</div><div class="line number8 index7 alt1"><code class="js plain">superHeroes('UberMan</code><code class="js string">',</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">'</code><code class="js plain">Exceptional Woman</code><code class="js string">',</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">'</code><code class="js plain">The Hunk');</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_726036" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Dart 不支持参数个数不固定 </code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_551721" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 如果最后一个参数标记了'..'，</code></div><div class="line number2 index1 alt1"><code class="js comments">// 则它会被当做一个数组来传递: </code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js keyword">function</code> <code class="js plain">superHeroes(msg, heroes..) {</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">hero </code><code class="js keyword">in</code> <code class="js plain">heroes)</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">stdout.println(msg, hero);</code></div><div class="line number7 index6 alt2"><code class="js plain">}</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js plain">superHeroes(</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">"There's no stopping"</code><code class="js plain">,</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">"UberMan"</code><code class="js plain">,</code></div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">"Exceptional Woman"</code><code class="js plain">, </code></div><div class="line number13 index12 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">"The Hunk"</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>迭代器</h2>
        <h3>列表的for循环</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_997089" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">colors = [</code><code class="js string">'red'</code><code class="js plain">, </code><code class="js string">'orange'</code><code class="js plain">, </code><code class="js string">'green'</code><code class="js plain">];</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0; i &lt; colors.length; i++) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(colors[i]);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_312042" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">colors = [</code><code class="js string">'red'</code><code class="js plain">, </code><code class="js string">'orange'</code><code class="js plain">, </code><code class="js string">'green'</code><code class="js plain">];</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0; i &lt; colors.length; i++) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(colors[i]);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_999911" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">colors = [</code><code class="js string">"red"</code><code class="js plain">, </code><code class="js string">"orange"</code><code class="js plain">, </code><code class="js string">"green"</code><code class="js plain">];</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0; i &lt; colors.length; i++)</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stdout.println(colors[i]);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>For-in 循环</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_454950" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">fruits = [</code><code class="js string">'orange'</code><code class="js plain">, </code><code class="js string">'apple'</code><code class="js plain">, </code><code class="js string">'banana'</code><code class="js plain">];</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">// JavaScript中'in'语句返回元素在数组中的索引，</code></div><div class="line number4 index3 alt1"><code class="js comments">// 而不是值。</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i </code><code class="js keyword">in</code> <code class="js plain">fruits) {</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(fruits[i]);</code></div><div class="line number8 index7 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_743774" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">fruits = [</code><code class="js string">'orange'</code><code class="js plain">, </code><code class="js string">'apple'</code><code class="js plain">, </code><code class="js string">'banana'</code><code class="js plain">];</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">// Dart中'in'语句返回元素在数组中的元素，</code></div><div class="line number4 index3 alt1"><code class="js comments">// 而不是索引。</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">fruit </code><code class="js keyword">in</code> <code class="js plain">fruits) {</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(fruit);</code></div><div class="line number8 index7 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_571137" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">fruits = [</code><code class="js string">'orange'</code><code class="js plain">, </code><code class="js string">'apple'</code><code class="js plain">, </code><code class="js string">'banana'</code><code class="js plain">];</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">// TIScript中'in'语句返回元素在数组中的元素，</code></div><div class="line number4 index3 alt1"><code class="js comments">// 而不是索引。</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">fruit </code><code class="js keyword">in</code> <code class="js plain">fruits)</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stdout.println(fruit);</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js comments">// 如果也需要索引，可以使用这种格式：</code></div><div class="line number10 index9 alt1"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">(i,fruit) </code><code class="js keyword">in</code> <code class="js plain">fruits)</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stdout.$({i}. {fruit});</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>对象/映射表(map)的For-in循环</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_665946" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">data = { … };</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">key </code><code class="js keyword">in</code> <code class="js plain">data) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'key'</code><code class="js plain">, key);</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'value'</code><code class="js plain">, data[key]);</code></div><div class="line number6 index5 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_89830" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">data = { … };</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">key </code><code class="js keyword">in</code> <code class="js plain">data.getKeys()) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(</code><code class="js string">'$key, ${data[key]}'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js comments">// 另外, 在Dart中Map有个forEach方法</code></div><div class="line number8 index7 alt1"><code class="js comments">// 也可以进行循环</code></div><div class="line number9 index8 alt2">&nbsp;</div><div class="line number10 index9 alt1"><code class="js plain">data.forEach((key, value){</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(</code><code class="js string">'${key}, ${value}'</code><code class="js plain">);</code></div><div class="line number12 index11 alt1"><code class="js plain">});</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_203495" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// TIscript也支持JavaScript中的方式</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">//同时也可以使用下面这种格式</code></div><div class="line number4 index3 alt1"><code class="js comments">//来同时枚举键和值：</code></div><div class="line number5 index4 alt2"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">(key,val) </code><code class="js keyword">in</code> <code class="js plain">data) {</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stdout.print(</code><code class="js string">"key"</code><code class="js plain">, key);</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stdout.println(</code><code class="js string">"value"</code><code class="js plain">, val);</code></div><div class="line number8 index7 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>闭包(closure) 和 循环计数器</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_862341" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">callbacks = [];</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">// 在循环中必须使用闭包来保存循环调用函数的返回值，</code></div><div class="line number4 index3 alt1"><code class="js comments">// 否则每个添加到callbacks中的数据都是2。</code></div><div class="line number7 index6 alt2"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0; i &lt; 2; i++) {</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">(</code><code class="js keyword">function</code><code class="js plain">(_i) {</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">callbacks.push(</code><code class="js keyword">function</code><code class="js plain">() {</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js plain">_i;</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">});</code></div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">})(i);</code></div><div class="line number13 index12 alt2"><code class="js plain">}</code></div><div class="line number14 index13 alt1">&nbsp;</div><div class="line number15 index14 alt2"><code class="js comments">// 如果没有使用内部的闭包，则结果会是2</code></div><div class="line number16 index15 alt1"><code class="js plain">callbacks[0]() </code><code class="js comments">// == 0</code></div><div class="line number17 index16 alt2">&nbsp;</div><div class="line number18 index17 alt1"><code class="js comments">// ECMAScript 6 可以支持使用块语句(this with the use of blocks)：</code></div><div class="line number20 index19 alt1"><code class="js plain">let callbacks = [];</code></div><div class="line number21 index20 alt2"><code class="js keyword">for</code> <code class="js plain">(let i = 0; i &lt; 10; i++) {</code></div><div class="line number22 index21 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">let j = i;</code></div><div class="line number23 index22 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">callbacks.push(</code><code class="js keyword">function</code><code class="js plain">() { print(j) });</code></div><div class="line number24 index23 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_921495" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Dart无法在每次迭代中重用和关闭相同的循环变量</code></div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">callbacks = [];</code></div><div class="line number4 index3 alt1"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0; i &lt; 2; i++) {</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">callbacks.add(() =&gt; print(i));</code></div><div class="line number6 index5 alt1"><code class="js plain">}</code></div><div class="line number7 index6 alt2">&nbsp;</div><div class="line number8 index7 alt1"><code class="js plain">callbacks[0]() </code><code class="js comments">// == 0</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_105248" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">callbacks = [];</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">// A在循环中必须使用闭包来保存循环调用函数的返回值，</code></div><div class="line number4 index3 alt1"><code class="js comments">// 否则每个添加到callbacks中的数据都是2。</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0; i &lt; 2; i++)</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">(:_i:callbacks.push(::_i))(i);</code></div><div class="line number9 index8 alt2">&nbsp;</div><div class="line number10 index9 alt1"><code class="js comments">// 如果没有使用内部的闭包，则结果会是2</code></div><div class="line number11 index10 alt2"><code class="js plain">callbacks[0]() </code><code class="js comments">// == 0</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>类</h2>
        <h3>定义</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_956545" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">Person() {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">this</code><code class="js plain">.name = </code><code class="js keyword">null</code><code class="js plain">;</code></div><div class="line number3 index2 alt2"><code class="js plain">};</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">Person.prototype.greet = </code><code class="js keyword">function</code><code class="js plain">() {</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js string">'Hello, '</code> <code class="js plain">+ </code><code class="js keyword">this</code><code class="js plain">.name;</code></div><div class="line number7 index6 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_491986" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">class</code> <code class="js plain">Person {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">name;</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">greet() =&gt; </code><code class="js string">'Hello, $name'</code><code class="js plain">;</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_158317" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">class</code> <code class="js plain">Person {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">function</code> <code class="js keyword">this</code><code class="js plain">() </code><code class="js comments">// constructor</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">{ </code><code class="js keyword">this</code><code class="js plain">.name = </code><code class="js keyword">null</code><code class="js plain">; }</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">function</code> <code class="js plain">greet()</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">{ </code><code class="js keyword">return</code> <code class="js plain">String.$(Hello,{</code><code class="js keyword">this</code><code class="js plain">.name});</code></div><div class="line number7 index6 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>有参数的构造器</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_446736" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">Person(name) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">this</code><code class="js plain">.name = name;</code></div><div class="line number3 index2 alt2"><code class="js plain">};</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_223005" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">class</code> <code class="js plain">Person {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">name;</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">Person(name) {</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">this</code><code class="js plain">.name = name;</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number7 index6 alt2"><code class="js plain">}</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js comments">// 另一个更简短格式</code></div><div class="line number10 index9 alt1">&nbsp;</div><div class="line number11 index10 alt2"><code class="js keyword">class</code> <code class="js plain">Person {</code></div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">name;</code></div><div class="line number13 index12 alt2">&nbsp;</div><div class="line number14 index13 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js comments">// 参数如果以'this.'为前缀，将会自动赋值给实例变量</code></div><div class="line number16 index15 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">Person(</code><code class="js keyword">this</code><code class="js plain">.name);</code></div><div class="line number17 index16 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_995786" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">class</code> <code class="js plain">Person {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js keyword">function</code> <code class="js keyword">this</code><code class="js plain">(name)</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">{ </code><code class="js keyword">this</code><code class="js plain">.name = name; }</code></div><div class="line number4 index3 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>实例化</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_450620" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">person = </code><code class="js keyword">new</code> <code class="js plain">Person();</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_905139" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">person = </code><code class="js keyword">new</code> <code class="js plain">Person();</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_509516" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">person = </code><code class="js keyword">new</code> <code class="js plain">Person();</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>反射</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_889953" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">name = </code><code class="js string">'Bob'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js keyword">typeof</code> <code class="js plain">name </code><code class="js comments">// == 'String'</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_817431" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 目前没有办法获取一个对象的类型信息。</code></div><div class="line number2 index1 alt1"><code class="js comments">// 反射将会很快支持。</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_255486" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">name = </code><code class="js string">"Bob"</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js keyword">typeof</code> <code class="js plain">name; </code><code class="js comments">// == #string</code></div><div class="line number3 index2 alt2"><code class="js plain">name.prototype === String; </code><code class="js comments">// true</code></div><div class="line number4 index3 alt1"><code class="js plain">name </code><code class="js keyword">instanceof</code> <code class="js plain">String; </code><code class="js comments">// true</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>类型检测</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_419506" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">name = </code><code class="js string">'Bob'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">name </code><code class="js keyword">instanceof</code> <code class="js plain">String </code><code class="js comments">// == true</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">(!(name </code><code class="js keyword">instanceof</code> <code class="js plain">Number)) </code><code class="js comments">// == true</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_107193" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">name = </code><code class="js string">'Bob'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">name is String </code><code class="js comments">// == true</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">name is! int </code><code class="js comments">// == true</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_227215" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">name = </code><code class="js string">"Bob"</code><code class="js plain">;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">name </code><code class="js keyword">instanceof</code> <code class="js plain">String; </code><code class="js comments">// == true</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">name !</code><code class="js keyword">instanceof</code> <code class="js plain">Integer; </code><code class="js comments">// == true</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>子类</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_159416" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">Person(name) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">this</code><code class="js plain">.name = name;</code></div><div class="line number3 index2 alt2"><code class="js plain">}</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">Person.prototype.greet = </code><code class="js keyword">function</code><code class="js plain">() {</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js string">'Hello, '</code> <code class="js plain">+ </code><code class="js keyword">this</code><code class="js plain">.name;</code></div><div class="line number7 index6 alt2"><code class="js plain">}</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js keyword">function</code> <code class="js plain">Employee(name, salary) {</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">Person.call(</code><code class="js keyword">this</code><code class="js plain">, name);</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">this</code><code class="js plain">.salary = salary;</code></div><div class="line number12 index11 alt1"><code class="js plain">}</code></div><div class="line number13 index12 alt2">&nbsp;</div><div class="line number14 index13 alt1"><code class="js plain">Employee.prototype = </code><code class="js keyword">new</code> <code class="js plain">Person();</code></div><div class="line number15 index14 alt2"><code class="js plain">Employee.prototype.constructor = Employee;</code></div><div class="line number16 index15 alt1">&nbsp;</div><div class="line number17 index16 alt2"><code class="js plain">Employee.prototype.grantRaise = </code><code class="js keyword">function</code><code class="js plain">(percent){</code></div><div class="line number18 index17 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">this</code><code class="js plain">.salary = (</code><code class="js keyword">this</code><code class="js plain">.salary * percent).toInt();</code></div><div class="line number19 index18 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_657321" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">class</code> <code class="js plain">Person {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">name;</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">Person(</code><code class="js keyword">this</code><code class="js plain">.name);</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">greet() =&gt; </code><code class="js string">'Hello, $name'</code><code class="js plain">;</code></div><div class="line number7 index6 alt2"><code class="js plain">}</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js keyword">class</code> <code class="js plain">Employee extends Person {</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">salary;</code></div><div class="line number11 index10 alt2">&nbsp;</div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">Employee(name, </code><code class="js keyword">this</code><code class="js plain">.salary) : </code><code class="js keyword">super</code><code class="js plain">(name);</code></div><div class="line number13 index12 alt2">&nbsp;</div><div class="line number14 index13 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">grantRaise(percent) {</code></div><div class="line number15 index14 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">salary = (salary * percent).toInt();</code></div><div class="line number16 index15 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number17 index16 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_439585" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">class</code> <code class="js plain">Person {</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">function</code> <code class="js keyword">this</code><code class="js plain">(name) { </code><code class="js keyword">this</code><code class="js plain">.name = name; }</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">function</code> <code class="js plain">greet() {</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js plain">String.$(Hello, {name});</code></div><div class="line number7 index6 alt2"><code class="js plain">}</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js keyword">class</code> <code class="js plain">Employee: Person {</code></div><div class="line number10 index9 alt1">&nbsp;</div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">function</code> <code class="js keyword">this</code><code class="js plain">(name, salary) {</code></div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">super</code><code class="js plain">(name); </code><code class="js comments">// 调用父类的构造器</code></div><div class="line number13 index12 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">this</code><code class="js plain">.salary = salary;</code></div><div class="line number14 index13 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number15 index14 alt2">&nbsp;</div><div class="line number16 index15 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">function</code> <code class="js plain">grantRaise(percent) {</code></div><div class="line number17 index16 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">this</code><code class="js plain">.salary</code></div><div class="line number18 index17 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">= (</code><code class="js keyword">this</code><code class="js plain">.salary * percent).toInteger();</code></div><div class="line number19 index18 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number20 index19 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>运行期程序操作</h2>
        <h3>eval</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_454394" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">eval(</code><code class="js string">'alert("hello from eval")'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_992231" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Dart不支持eval()，这不是一个bug。</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_270350" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">script = </code><code class="js string">"alert(\"hello from eval\")"</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js comments">// 通常用法:</code></div><div class="line number3 index2 alt2"><code class="js plain">eval(script);</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js comments">// 可控制的eval:</code></div><div class="line number6 index5 alt1"><code class="js plain">eval(script,</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js plain">{</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">alert: </code><code class="js keyword">function</code><code class="js plain">() {</code><code class="js comments">/*nothing!*/</code><code class="js plain">},</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">self: </code><code class="js keyword">null</code><code class="js plain">,</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">document: </code><code class="js keyword">null</code><code class="js plain">,</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">window: </code><code class="js keyword">null</code></div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js plain">});</code></div><div class="line number13 index12 alt2"><code class="js comments">// 被传递的对象扮演脚本的全局名称空间</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>动态添加方法到类或名称空间</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_670038" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">String.prototype.startsWith = </code><code class="js keyword">function</code><code class="js plain">(beginning){</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">head = </code><code class="js keyword">this</code><code class="js plain">.substr(0, beginning.length);</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js plain">head == beginning;</code></div><div class="line number4 index3 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_661069" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Dart不支持在程序编译后动态修改类</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_614962" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 为所有字符串添加startsWith方法:</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">function</code> <code class="js plain">String.startsWith(head)</code></div><div class="line number4 index3 alt1"><code class="js plain">{</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js keyword">this</code><code class="js plain">.indexOf(head) == 0;</code></div><div class="line number6 index5 alt1"><code class="js plain">}</code></div><div class="line number7 index6 alt2"><code class="js keyword">function</code> <code class="js plain">String.endsWith(tail)</code></div><div class="line number8 index7 alt1"><code class="js plain">{</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js keyword">this</code><code class="js plain">.indexOf(tail) ==</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">this</code><code class="js plain">.length - tail.length;</code></div><div class="line number11 index10 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>操作符重载</h2></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_146210" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 不支持</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_746370" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">class</code> <code class="js plain">Point {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">x, y;</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">Point(</code><code class="js keyword">this</code><code class="js plain">.x, </code><code class="js keyword">this</code><code class="js plain">.y);</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">operator + (Point p) =&gt; </code><code class="js keyword">new</code> <code class="js plain">Point(x + p.x, y + p.y);</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">toString() =&gt; </code><code class="js string">'x:$x, y:$y'</code><code class="js plain">;</code></div><div class="line number8 index7 alt1"><code class="js plain">}</code></div><div class="line number9 index8 alt2">&nbsp;</div><div class="line number10 index9 alt1"><code class="js plain">main() {</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">p1 = </code><code class="js keyword">new</code> <code class="js plain">Point(1, 1);</code></div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">p2 = </code><code class="js keyword">new</code> <code class="js plain">Point(2, 2);</code></div><div class="line number13 index12 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">p3 = p1 + p2;</code></div><div class="line number14 index13 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(p3);</code></div><div class="line number15 index14 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_954821" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 尚不支持</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>选择DOM</h2>
        <h3>在DOM中查找元素</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_163647" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">document.getElementById(</code><code class="js string">'main'</code><code class="js plain">)</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">document.querySelector(</code><code class="js string">'#main'</code><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_536791" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">document.query(</code><code class="js string">'#main'</code><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_383797" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">self.select(</code><code class="js string">"#main"</code><code class="js plain">)</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">self.$(</code><code class="js preprocessor">#main) // select函数的字符串器(stringizer)格式</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>根据类(class)查找一个元素</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_971023" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">document.getElementsByClassName(</code><code class="js string">'visible'</code><code class="js plain">)[0]</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">document.querySelector(</code><code class="js string">'.visible'</code><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_661416" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">document.query(</code><code class="js string">'.visible'</code><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_972406" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">self.select(</code><code class="js string">".visible"</code><code class="js plain">)</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">self.$(.visible)</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>根据类(class)查找所有元素</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_832954" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">document.getElementsByClassName(</code><code class="js string">'visible'</code><code class="js plain">)</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">document.querySelectorAll(</code><code class="js string">'.visible'</code><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_609059" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">document.queryAll(</code><code class="js string">'.visible'</code><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_846963" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 该方法返回元素引用的数组:</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">self.selectAll(</code><code class="js string">".visible"</code><code class="js plain">);</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">self.$$(.visible);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>根据标签(tag)、名称(name)和类(class)查找元素</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_770989" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">document</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">.getElementById(</code><code class="js string">'main'</code><code class="js plain">)</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">.getElementsByTagName(</code><code class="js string">'div'</code><code class="js plain">)[0]</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">.getElementsByClassName(</code><code class="js string">'visible'</code><code class="js plain">)</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js plain">document.querySelectorAll</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js plain">(</code><code class="js string">'#main div:first-of-type .visible'</code><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_549237" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">document.queryAll</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">(</code><code class="js string">'#main div:first-of-type .visible'</code><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_561315" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">self.selectAll</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">(</code><code class="js string">"#main div:first-of-type .visible"</code><code class="js plain">)</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js plain">self.$$(</code><code class="js preprocessor">#main div:first-of-type .visible)</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>根据选择器查找子元素(sub-element)</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_258269" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 没有此特性 </code></div><div class="line number2 index1 alt1"><code class="js comments">// 可以考虑使用 jQuery的find()方法。</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_930512" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 没有此特性</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_349070" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">elem.selectAll(</code><code class="js string">"li"</code><code class="js plain">);</code></div><div class="line number2 index1 alt1"><code class="js plain">elem.$$(li);</code></div><div class="line number3 index2 alt2"><code class="js comments">// 在select中的:root选择器代指 "查找根"，</code></div><div class="line number5 index4 alt2"><code class="js comments">// 所以下面的代码含义是选择该元素的直接子元素</code></div><div class="line number7 index6 alt2"><code class="js plain">elem.selectAll(</code><code class="js string">":root &gt; li"</code><code class="js plain">);</code></div><div class="line number8 index7 alt1"><code class="js plain">elem.$$(:root &gt; li);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>遍历列表元素</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_244530" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">i = 0, el; el = els[i]; i++) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">doSomethingWithEl(el);</code></div><div class="line number3 index2 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_482814" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">el </code><code class="js keyword">in</code> <code class="js plain">els) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">doSomethingWithEl(el);</code></div><div class="line number3 index2 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_944271" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">for</code> <code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">el </code><code class="js keyword">in</code> <code class="js plain">els) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">doSomethingWithEl(el);</code></div><div class="line number3 index2 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>访问第一个子元素</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_980524" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">elem.firstChild()</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_827900" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">elem.nodes[0]</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_972139" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Element是它的子元素的列表，所以:</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">elem[0]</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>测试一个元素是否有子元素</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_302942" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">elem.hasChildNodes() </code><code class="js comments">// 并不完全准确</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_395740" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">!elem.nodes.isEmpty()</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_224926" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// Element是它的子元素的列表，所以:</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">elem.length &gt; 0;</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>操作DOM</h2>
        <h3>创建一个元素</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_416320" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">element = document.createElement(</code><code class="js string">'div'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_197155" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js preprocessor">#import('dart:html');</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">element = </code><code class="js keyword">new</code> <code class="js plain">Element.tag(</code><code class="js string">'div'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_753523" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">element = </code><code class="js keyword">new</code> <code class="js plain">Element(</code><code class="js string">"div"</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>设置元素内容</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_487438" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">element = document.createElement(</code><code class="js string">'p'</code><code class="js plain">);</code></div><div class="line number2 index1 alt1"><code class="js plain">element.innerHTML</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">= </code><code class="js string">'brown &lt;em&gt;fox&lt;/em&gt;'</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_733387" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">element =</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">new</code> <code class="js plain">Element.html(</code><code class="js string">'&lt;p&gt;brown &lt;em&gt;fox&lt;/em&gt;&lt;/p&gt;'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_979995" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">element = </code><code class="js keyword">new</code> <code class="js plain">Element(</code><code class="js string">"p"</code><code class="js plain">);</code></div><div class="line number2 index1 alt1"><code class="js plain">parent.append(element);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js plain">element.html = </code><code class="js string">"&lt;p&gt;brown &lt;em&gt;fox&lt;/em&gt;&lt;/p&gt;"</code><code class="js plain">; </code><code class="js comments">// 或者</code></div><div class="line number5 index4 alt2"><code class="js plain">element.$content(&lt;p&gt;brown &lt;em&gt;fox&lt;/em&gt;&lt;/p&gt;);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>添加一个元素到父元素</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_940558" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.appendChild(newElement);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_389077" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.nodes.add(newElement);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_556706" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.append(newElement);</code></div><div class="line number2 index1 alt1"><code class="js plain">element.prepend(newElement);</code></div><div class="line number3 index2 alt2"><code class="js plain">element.insert(12,newElement);</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">element.$append(&lt;p&gt;...&lt;/p&gt;);</code></div><div class="line number6 index5 alt1"><code class="js plain">element.$prepend(&lt;p&gt;...&lt;/p&gt;);</code></div><div class="line number7 index6 alt2">&nbsp;</div><div class="line number8 index7 alt1"><code class="js comments">// 在元素后面添加HTML代码</code></div><div class="line number9 index8 alt2"><code class="js plain">element.$after(&lt;p&gt;...&lt;/p&gt;);</code></div><div class="line number10 index9 alt1"><code class="js comments">// 在元素后面插入HTML代码</code></div><div class="line number11 index10 alt2"><code class="js plain">element.$before(&lt;p&gt;...&lt;/p&gt;);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>移除一个元素</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_242039" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.parentNode.removeChild(element);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_510665" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.remove();</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_198629" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.remove();</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>正则表达式</h2></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_825725" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">email = </code><code class="js string">'test@example.com'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js plain">email.match(/@/)</code></div><div class="line number3 index2 alt2"><code class="js comments">// == ['@']</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_230840" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">email = </code><code class="js string">'test@example.com'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js plain">(</code><code class="js keyword">new</code> <code class="js plain">RegExp(@</code><code class="js string">'o'</code><code class="js plain">)).firstMatch(email)</code></div><div class="line number3 index2 alt2"><code class="js comments">// == Match Object</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_371299" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">email = </code><code class="js string">'test@example.com'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js plain">email.match(/@/)</code></div><div class="line number3 index2 alt2"><code class="js comments">// == ['@']</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_295750" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">invalidEmail = </code><code class="js string">'f@il@example.com'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js plain">invalidEmail.match(/@/g)</code></div><div class="line number3 index2 alt2"><code class="js comments">// == ['@', '@']</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_878082" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">invalidEmail = </code><code class="js string">'f@il@example.com'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js plain">(</code><code class="js keyword">new</code> <code class="js plain">RegExp(@</code><code class="js string">'o'</code><code class="js plain">)).allMatches(invalidEmail)</code></div><div class="line number3 index2 alt2"><code class="js comments">// == Iterable Match Object</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_344925" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">invalidEmail = </code><code class="js string">'f@il@example.com'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js plain">invalidEmail.match(/@/g)</code></div><div class="line number3 index2 alt2"><code class="js comments">// == ['@', '@']</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>异常</h2>
        <h3>抛出一个异常</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_692744" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">throw</code> <code class="js keyword">new</code> <code class="js plain">Error(</code><code class="js string">"Intruder Alert!!"</code><code class="js plain">);</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">// 或者...</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js keyword">throw</code> <code class="js string">"Intruder Alert!!"</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_292912" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">throw</code> <code class="js keyword">new</code> <code class="js plain">Exception(</code><code class="js string">"Intruder Alert!!"</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_688226" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">throw</code> <code class="js string">"Intruder Alert!!"</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3"><h3>捕捉一个异常</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_398029" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">try</code> <code class="js plain">{</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">undefinedFunction();</code></div><div class="line number3 index2 alt2"><code class="js plain">} </code><code class="js keyword">catch</code><code class="js plain">(e) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">if</code> <code class="js plain">(e </code><code class="js keyword">instanceof</code> <code class="js plain">ReferenceError) {</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js plain">console.log(</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">'You called a function that does not exist'</code><code class="js plain">);</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number8 index7 alt1"><code class="js plain">} </code><code class="js keyword">finally</code> <code class="js plain">{</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js string">'This runs even if an exception is thrown'</code><code class="js plain">);</code></div><div class="line number11 index10 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_434752" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">try</code> <code class="js plain">{</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">Math.parseInt(</code><code class="js string">"three"</code><code class="js plain">);</code></div><div class="line number3 index2 alt2"><code class="js plain">} </code><code class="js keyword">catch</code><code class="js plain">(BadNumberFormatException bnfe) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(</code><code class="js string">"Ouch! Detected: $bnfe"</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">} </code><code class="js keyword">catch</code><code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">e) {</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(</code><code class="js string">"If some other type of exception"</code><code class="js plain">);</code></div><div class="line number7 index6 alt2"><code class="js plain">} </code><code class="js keyword">finally</code> <code class="js plain">{</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(</code><code class="js string">"This runs even if an exception is thrown"</code><code class="js plain">);</code></div><div class="line number9 index8 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_343435" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">try</code> <code class="js plain">{</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">undefinedFunction();</code></div><div class="line number3 index2 alt2"><code class="js plain">} </code><code class="js keyword">catch</code><code class="js plain">(e) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stderr.println(e);</code></div><div class="line number5 index4 alt2"><code class="js plain">} </code><code class="js keyword">finally</code> <code class="js plain">{</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">stdout.println(</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js string">"This runs even if an exception is thrown"</code><code class="js plain">);</code></div><div class="line number8 index7 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>事件处理</h2>
        <h3>添加一个事件处理程序</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_941456" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.addEventListener(</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js string">'click'</code><code class="js plain">, handleOnClick, </code><code class="js keyword">false</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_871320" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.on.click.add(handleOnClick);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_75697" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.onClick = handleOnClick;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">// 或者</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js plain">element.subscribe(</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">handleOnClick,</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">Event.BEHAVIOR_EVENT,</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">Event.BUTTON_CLICK);</code></div><div class="line number9 index8 alt2">&nbsp;</div><div class="line number10 index9 alt1"><code class="js comments">// 或者使用装饰器:</code></div><div class="line number11 index10 alt2">&nbsp;</div><div class="line number12 index11 alt1"><code class="js plain">@click @on </code><code class="js string">"button#some"</code> <code class="js plain">:</code></div><div class="line number13 index12 alt2"><code class="js plain">{</code></div><div class="line number14 index13 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js comments">// 在这里处理button#some的点击</code></div><div class="line number15 index14 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>移除一个事件处理器</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_303091" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.removeEventListener(</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js string">'click'</code><code class="js plain">, handleOnClick, </code><code class="js keyword">false</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_631055" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.on.click.remove(handleOnClick);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_484367" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.onClick = undefined;</code></div><div class="line number2 index1 alt1"><code class="js comments">// 或</code></div><div class="line number3 index2 alt2"><code class="js plain">element.unsubscribe(handleOnClick);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>计时</h2>
        <h3>安排一个延迟事件</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_4157" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">setTimeout(</code><code class="js keyword">function</code><code class="js plain">() { … }, 500);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_766056" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">window.setTimeout(() { … }, 500);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_626849" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.timer(500, </code><code class="js keyword">function</code><code class="js plain">() {...} );</code></div><div class="line number2 index1 alt1"><code class="js comments">//函数被调用时，'this'为该element元素</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>衡量一个函数的执行时间</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_821562" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">measure(fn) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">start = Date.now();</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">fn();</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js plain">Date.now() - start;</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_649546" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">measure(fn) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">Stopwatch watch = </code><code class="js keyword">new</code> <code class="js plain">Stopwatch.start();</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">fn();</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js plain">watch.elapsedInMs();</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_75482" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">measure(fn) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js comments">// Date.ticks() - 从系统启动开始的毫秒值</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">var</code> <code class="js plain">start = Date.ticks();</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">fn();</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js plain">Date.ticks() - start;</code></div><div class="line number7 index6 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>HTML属性</h2>
        <h3>获取HTML属性</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_104491" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.getAttribute(</code><code class="js string">'href'</code><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_849143" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.attributes[</code><code class="js string">'href'</code><code class="js plain">]</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_547755" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.attributes[</code><code class="js string">"href"</code><code class="js plain">]</code></div><div class="line number2 index1 alt1"><code class="js comments">// or</code></div><div class="line number3 index2 alt2"><code class="js plain">element.@[</code><code class="js string">"href"</code><code class="js plain">]</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_561306" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.setAttribute(</code><code class="js string">'playable'</code><code class="js plain">, </code><code class="js keyword">true</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_118478" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.attributes[</code><code class="js string">'playable'</code><code class="js plain">] = </code><code class="js keyword">true</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_899321" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.attributes[</code><code class="js string">"playable"</code><code class="js plain">] = </code><code class="js keyword">true</code><code class="js plain">;</code></div><div class="line number2 index1 alt1"><code class="js comments">//或者</code></div><div class="line number3 index2 alt2"><code class="js plain">element.@[</code><code class="js string">"playable"</code><code class="js plain">] = </code><code class="js keyword">true</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>移除HTML属性</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_254745" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.removeAttribute(</code><code class="js string">'playable'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_58840" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.attributes.remove(</code><code class="js string">'playable'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_239944" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.attributes[</code><code class="js string">"playable"</code><code class="js plain">] = undefined;</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>检查HTML属性是否已存在</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_894133" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.hasAttribute(</code><code class="js string">'href'</code><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_488532" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.attributes.contains(</code><code class="js string">'href'</code><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_638803" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.attributes[</code><code class="js string">"playable"</code><code class="js plain">] !== undefined;</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>CSS 类</h2>
        <h3>添加 CSS 类</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_620908" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.className += </code><code class="js string">' new-class'</code><code class="js plain">;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">element.classList.add(</code><code class="js string">'new-class'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_229819" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.classes.add(</code><code class="js string">'new-class'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_772444" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.attributes.addClass(</code><code class="js string">"new-class"</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>移除CSS类</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_307810" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.className</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js plain">= element.className.replace(/ </code><code class="js keyword">new</code><code class="js plain">-</code><code class="js keyword">class</code><code class="js plain">/, </code><code class="js string">''</code><code class="js plain">);</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js plain">element.classList.remove(</code><code class="js string">'new-class'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_772790" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.classes.remove(</code><code class="js string">'new-class'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_951652" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">element.attributes.removeClass(</code><code class="js string">"new-class"</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>AJAX</h2>
        <h3>请求数据</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_687695" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">client = </code><code class="js keyword">new</code> <code class="js plain">XMLHttpRequest;</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">client.onreadystatechange = </code><code class="js keyword">function</code><code class="js plain">() {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">if</code> <code class="js plain">(</code><code class="js keyword">this</code><code class="js plain">.readyState == 4) {</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">processData(</code><code class="js keyword">this</code><code class="js plain">);</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number7 index6 alt2"><code class="js plain">}</code></div><div class="line number8 index7 alt1"><code class="js plain">client.open(</code><code class="js string">'GET'</code><code class="js plain">, </code><code class="js string">'data.json'</code><code class="js plain">);</code></div><div class="line number9 index8 alt2"><code class="js plain">client.send();</code></div><div class="line number10 index9 alt1">&nbsp;</div><div class="line number11 index10 alt2"><code class="js keyword">function</code> <code class="js plain">processData(request) {</code></div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'data received: '</code></div><div class="line number13 index12 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">+ request.responseText);</code></div><div class="line number14 index13 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_380484" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// getTEMPNAME方法名将会被修改。</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">xhr = </code><code class="js keyword">new</code> <code class="js plain">XMLHttpRequest.getTEMPNAME(</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js string">"/data.json"</code><code class="js plain">, (req) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">print(</code><code class="js string">"data received: ${req.responseText}"</code><code class="js plain">);</code></div><div class="line number5 index4 alt2"><code class="js plain">});</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_205426" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">onDataArrived(data) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js comments">// data是一个对象 - 已经被解析的JSON</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js keyword">this</code><code class="js plain">.html = String.printf(</code><code class="js string">"Got data %V"</code><code class="js plain">, data);</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js comments">// String.printf("%V", data) 等同于JSON.stringize()。</code></div><div class="line number8 index7 alt1"><code class="js plain">}</code></div><div class="line number9 index8 alt2">&nbsp;</div><div class="line number10 index9 alt1"><code class="js comments">// 发送HTTP GET请求到服务端,</code></div><div class="line number11 index10 alt2"><code class="js comments">// 当准备好时解析响应然后调用onDataArrived</code></div><div class="line number13 index12 alt2">&nbsp;</div><div class="line number14 index13 alt1"><code class="js plain">element.request(</code></div><div class="line number15 index14 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js plain">onDataArrived,</code> <code class="js preprocessor">#get, "/data.json" );</code></div><div class="line number16 index15 alt1">&nbsp;</div><div class="line number17 index16 alt2"><code class="js comments">// 当请求正在执行时，元素会得到</code></div><div class="line number18 index17 alt1"><code class="js comments">// :busy CSS 状态标识。所以你可以通过该标识定义元素忙时的样式</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>jQuery 特性</h2>
        <h3>对文档加载完成做出反应</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_5438" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">$(document).ready(</code><code class="js keyword">function</code><code class="js plain">(){</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'Content is loaded'</code><code class="js plain">);</code></div><div class="line number3 index2 alt2"><code class="js plain">});</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_318614" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">window.on.contentLoaded.add(</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">(e) =&gt; print(</code><code class="js string">'Content is loaded'</code><code class="js plain">);</code></div><div class="line number3 index2 alt2"><code class="js plain">);</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js comments">// 然而在Dartium中, main()函数通常会在DOMContentLoaded后才运行</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_757125" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">self.ready()</code></div><div class="line number2 index1 alt1"><code class="js plain">{</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;</code><code class="js plain">stdout.println(</code><code class="js string">"Content is loaded"</code><code class="js plain">);</code></div><div class="line number4 index3 alt1"><code class="js plain">}</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js comments">// 在Sciter中，脚本代码仅在DOM元素加载完成后执行</code></div><div class="line number8 index7 alt1">&nbsp;</div><div class="line number9 index8 alt2"><code class="js comments">// self.ready() 在DOM元素获取它们的样式</code></div><div class="line number10 index9 alt1"><code class="js comments">// 以及所有行为都添加好之后被调用</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>元素查找</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_463096" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">els = jQuery(</code><code class="js string">'div'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_777134" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">List els = document.query(</code><code class="js string">'div'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_762663" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">el = $(</code><code class="js string">"div"</code><code class="js plain">); </code><code class="js comments">// 第一个</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">els = $$(</code><code class="js string">"div"</code><code class="js plain">); </code><code class="js comments">// 所有</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>查找最近的父元素</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_873703" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">nearestUL = els.parent(</code><code class="js string">'ul'</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_358793" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 没有此特性</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_909163" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">nearestUL = el.selectParent(</code><code class="js string">"ul"</code><code class="js plain">); </code><code class="js comments">// 或者</code></div><div class="line number2 index1 alt1"><code class="js keyword">var</code> <code class="js plain">nearestUL = el.$p(ul); </code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>检测一个元素是否满足某个选择器</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_93447" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number2 index1 alt1"><code class="js comments">// 如果element是一个无序列表中的&lt;li&gt;元素则返回true</code></div><div class="line number3 index2 alt2"><code class="js plain">el.is(</code><code class="js string">'ul &gt; li'</code><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_864614" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 没有此特性</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_853792" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 如果element是一个无序列表中的&lt;li&gt;元素则返回true </code></div><div class="line number3 index2 alt2"><code class="js plain">el.$is(ul &gt; li)</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>创建节点(Node)</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_103896" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">pic = $(</code><code class="js string">'&lt;img/&gt;'</code><code class="js plain">);</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">pic.addClass(</code><code class="js string">'avatar'</code><code class="js plain">);</code></div><div class="line number4 index3 alt1"><code class="js plain">pic.toggleClass(</code><code class="js string">'main'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js plain">pic.attr(</code><code class="js string">'src'</code><code class="js plain">, </code><code class="js string">'myPic.jpg'</code><code class="js plain">);</code></div><div class="line number7 index6 alt2">&nbsp;</div><div class="line number8 index7 alt1"><code class="js plain">$(</code><code class="js string">'body'</code><code class="js plain">).append(pic);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_704105" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">pic = </code><code class="js keyword">new</code> <code class="js plain">Element.tag(</code><code class="js string">'img'</code><code class="js plain">);</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js plain">pic.classes.add(</code><code class="js string">'avatar'</code><code class="js plain">);</code></div><div class="line number4 index3 alt1"><code class="js plain">pic.classes.toggle(</code><code class="js string">'main'</code><code class="js plain">);</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="js plain">pic.attributes[</code><code class="js string">'src'</code><code class="js plain">] = </code><code class="js string">'myPic.jpg'</code><code class="js plain">;</code></div><div class="line number7 index6 alt2">&nbsp;</div><div class="line number8 index7 alt1"><code class="js plain">document.body.nodes.add(pic);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_19210" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">$(body).$append(&lt;img src=</code><code class="js string">'mypic.jpg'</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">class</code><code class="js plain">=</code><code class="js string">'avatar main'</code> <code class="js plain">&gt;);</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>事件处理</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_120273" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">$(</code><code class="js string">'a.person'</code><code class="js plain">).click(</code><code class="js keyword">function</code><code class="js plain">(e){</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">console.log(</code><code class="js string">'Person clicked'</code><code class="js plain">);</code></div><div class="line number3 index2 alt2"><code class="js plain">})</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_276747" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">document.queryAll(</code><code class="js string">'a.person'</code><code class="js plain">).forEach((el) {</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">el.on.click.add((e) =&gt; print(</code><code class="js string">'Person clicked'</code><code class="js plain">));</code></div><div class="line number3 index2 alt2"><code class="js plain">});</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js comments">// coming soon!!</code></div><div class="line number6 index5 alt1"><code class="js plain">document.queryAll(</code><code class="js string">'a.person'</code><code class="js plain">)</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">.on.click.add((e) =&gt; print(</code><code class="js string">'Person clicked'</code><code class="js plain">));</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_114707" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">function</code> <code class="js plain">handler()</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">{ stdout.println(</code><code class="js string">"Person clicked"</code><code class="js plain">); }</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="js keyword">for</code><code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">el </code><code class="js keyword">in</code> <code class="js plain">$$(a.person))</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">el.onClick = handler;</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>相对节点</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_577854" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myNode = $(</code><code class="js string">'div:first'</code><code class="js plain">);</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">parent = myNode.parent();</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js keyword">var</code> <code class="js plain">next = myNode.next();</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_963935" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myNode = document.query(</code><code class="js string">'div'</code><code class="js plain">);</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">parent = myNode.parent;</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js keyword">var</code> <code class="js plain">next = myNode.nextNode;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_923009" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myNode = $(div);</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">var</code> <code class="js plain">parent = myNode.parent;</code></div><div class="line number4 index3 alt1">&nbsp;</div><div class="line number5 index4 alt2"><code class="js keyword">var</code> <code class="js plain">next = myNode.next;</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>子元素</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_85660" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myNode = $(</code><code class="js string">'div:first'</code><code class="js plain">);</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">// 如果有子元素，则移除它们</code></div><div class="line number4 index3 alt1"><code class="js keyword">if</code> <code class="js plain">(!myNode.is(</code><code class="js string">':empty'</code><code class="js plain">)) {</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">myNode.empty();</code></div><div class="line number6 index5 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_295646" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myNode = document.query(</code><code class="js string">'div'</code><code class="js plain">);</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js keyword">if</code> <code class="js plain">(!myNode.nodes.isEmpty()) {</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">myNode.nodes.clear();</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_916369" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">myNode = $(div);</code></div><div class="line number2 index1 alt1">&nbsp;</div><div class="line number3 index2 alt2"><code class="js comments">// 如果有子元素，则移除它们</code></div><div class="line number4 index3 alt1"><code class="js keyword">if</code> <code class="js plain">(!myNode.$is(:empty))</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">myNode.clear();</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="js comments">// 或者</code></div><div class="line number8 index7 alt1"><code class="js keyword">if</code> <code class="js plain">(myNode.length)</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">myNode.clear();</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>克隆(Clone)</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_192741" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">clonedElement = $(</code><code class="js string">'#about'</code><code class="js plain">).clone();</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_521963" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">clonedElement </code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">= document.query(</code><code class="js string">'#about'</code><code class="js plain">).clone(</code><code class="js keyword">true</code><code class="js plain">);</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_653954" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">var</code> <code class="js plain">clonedElement = $(</code><code class="js preprocessor">#about).clone();</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h2>脚本姓名</h2>
        <h3>声明行为(Behavior)类</h3></td></tr>
    <tr>
      <td>
        <div><div id="highlighter_293224" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 没有直接与之等价的, </code></div><div class="line number2 index1 alt1"><code class="js comments">// 在FireFox中可以使用XUL</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_323561" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 没有这样的功能？</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_664206" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js keyword">class</code> <code class="js plain">ButtonWithPopup : Behavior</code></div><div class="line number2 index1 alt1"><code class="js plain">{</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js comments">// 在鼠标按下时将元素包含的&lt;menu&gt;元素</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js comments">// 作为弹出菜单在这个元素的下面(2)显示:</code></div></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js keyword">function</code> <code class="js plain">onMouse(evt) {</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">if</code><code class="js plain">(evt.type == Event.MOUSE_DOWN) {</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">this</code><code class="js plain">.popup( </code><code class="js keyword">this</code><code class="js plain">.$(menu), 2);</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js keyword">return</code> <code class="js keyword">true</code><code class="js plain">; </code><code class="js comments">// 事件已被处理</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number12 index11 alt1"><code class="js plain">}</code></div></div></td></tr></tbody></table></div></div></td></tr>
    <tr>
      <td colspan="3">
        <h3>为所有匹配的DOM元素添加行为</h3></td></tr>
    <tr>
      <td>
         在CSS中使用<a href="http://www.w3.org/TR/becss/#the-binding">becss</a>:
        <div><div id="highlighter_234863" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">button.popup-menu</code></div><div class="line number2 index1 alt1"><code class="js plain">{</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">binding:url(button-</code><code class="js keyword">with</code><code class="js plain">-popup.xul);</code></div><div class="line number4 index3 alt1"><code class="js plain">}</code></div><div class="line number5 index4 alt2"><code class="js comments">// 在脚本中</code></div><div class="line number6 index5 alt1"><code class="js plain">button.style.binding = </code><code class="js string">"button-with-popup.xul"</code><code class="js plain">;</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_632829" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 没有这样的功能？</code></div></div></td></tr></tbody></table></div></div></td>
      <td>
        <div><div id="highlighter_878590" class="syntaxhighlighter nogutter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js comments">// 在CSS中:</code></div><div class="line number2 index1 alt1"><code class="js plain">button.popup-menu</code></div><div class="line number3 index2 alt2"><code class="js plain">{</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">prototype: ButtonWithPopup url(button-</code><code class="js keyword">with</code><code class="js plain">-popup.tis);</code></div><div class="line number5 index4 alt2"><code class="js plain">}</code></div><div class="line number6 index5 alt1"><code class="js comments">// 在脚本中 (使用运行期子类)</code></div><div class="line number7 index6 alt2"><code class="js keyword">for</code><code class="js plain">(</code><code class="js keyword">var</code> <code class="js plain">btn </code><code class="js keyword">in</code> <code class="js plain">$$(button.popup-menu))</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;</code><code class="js plain">btn.prototype = ButtonWithPopup;</code></div></div></td></tr></tbody></table></div></div></td></tr></tbody></table>
</body></html>